/*
 *  MeCell.js
 *  qinghong 2016-7-19
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity
} from 'react-native';

import constant from './constant';

class MeCell extends Component {

    render() {
        const { meData, onSelect } = this.props;
        const separateLineWidth = meData.id == 2 ? constant.window.screenWidth : constant.window.screenWidth - 48;
        return (
            <TouchableOpacity
                onPress={onSelect}
                style={{height: 50}}>
                <View style={styles.cellView}>
                    <Image style={styles.icon} source={meData.icon}/>
                    <View style={{flex:1, paddingLeft: 10}}>
                        <Text style={{fontSize:16}}>{meData.text}</Text>
                    </View>
                    <Image source={require('../../images/arrow_right.png')}/>
                </View>
                <View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
                    <View style={[styles.separateLine, {width: separateLineWidth}]}/>
                </View>
            </TouchableOpacity>
        );
    }
}

var styles = StyleSheet.create({
    cellView: {
        paddingHorizontal: 16,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#FFF',
        flex: 1
    },
    icon: {
        width: 20,
        height: 20,
        borderRadius: 10
    },
    separateLine: {
        height: 0.5,
        backgroundColor: constant.colors.grayLineColor
    }
});

module.exports = MeCell;
